import Taro, {Component} from "@tarojs/taro";
import {View, Picker, Form, Button, Input} from "@tarojs/components";
import { AtIcon } from 'taro-ui'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getRuntime} from '../../utils/common'
import './cardAdd.less'

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class CardAdd extends Component<IHomeProps> {
  constructor(props){
    super(props)
  }

  state = {
    allBank: [],
    currentIndex: 0,
    bankCode: '',
    bankName: ''
  }

  componentWillMount() {
    Taro.setNavigationBarTitle({title: '添加银行卡'})
    this.getAllBank()
  }

  link(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  getAllBank() {
    let { userStore }  = this.props.stores
    userStore.getBanks({
      callback: res => {
          this.setState({
            allBank: res.items
          })
      }
    })
  }

  changeBank(e) {
    this.setState({
      currentIndex: e.detail.value
    })
  }

  onSubmit(e) {
    let { cardName,cardNumber } = e.detail.value
    let {allBank,currentIndex} = this.state
    let { userStore } = this.props.stores

    if(!cardName){ getRuntime().showToast('请填写持卡人姓名~');return }
    if(!cardNumber){ getRuntime().showToast('请填写银行卡卡号~');return; }
    // if(!isNumber(cardName)){ getRuntime().showToast('银行卡卡号只能为数字~');return; }
    userStore.saveUserCard({
      form: {
        cardName,
        cardNumber,
        bankCode: allBank[currentIndex]['bankCode'],
        bankName: allBank[currentIndex]['bankName']
      },
      callback: () => {
        getRuntime().showToast('添加银行卡成功~')
        setTimeout(() => {
          getRuntime().navigateBack()
        },2000)
      }
    })
  }

  render() {
    let { allBank,currentIndex } = this.state
    return (
      <View className='card-add'>
        <Form onSubmit={this.onSubmit.bind(this)}>
        <View className='form-wrap content-30'>
          {/*输入框*/}
          <View className='form-wrap__group'>
            <View className='form-wrap__title'>持卡人</View>
            <View className='form-wrap__content'>
              <Input className='input' name='cardName' placeholderClass='placeholder-class' placeholder='请输入持卡人姓名' />
            </View>
          </View>
          {/*输入框*/}
          <View className='form-wrap__group'>
            <View className='form-wrap__title'>银行卡号</View>
            <View className='form-wrap__content'>
              <Input className='input' name='cardNumber' placeholderClass='placeholder-class' placeholder='请输入银行卡号' />
            </View>
          </View>
          {/*选择框*/}
          <View className='form-wrap__group bbnone'>
            <View className='form-wrap__title'>开户行</View>
            <View className='form-wrap__content form-wrap__select'>
              <Picker className='select'  mode='multiSelector' range={[allBank]} rangeKey='bankName' onChange={this.changeBank.bind(this)}>
                <View className='select' style={{display:'flex'}}>
                  {allBank.length<=0&&<View className='select placeholder-class'>请选择开户行</View>}
                  {allBank.length>0&&<View className='select'>{allBank&&allBank[currentIndex]['bankName']}</View>}
                  <AtIcon className='drop-icon' value='chevron-right' size='20' color='#d1d1d1' />
                </View>
              </Picker>
            </View>
          </View>
        </View>
        <Button className='circular-submit' formType='submit' style={{marginTop: 50}}>确定添加</Button>
        </Form>
      </View>
    )
  }
}

export default CardAdd
